<template>
  <div class="container">
    <Breadcrumb
      :items="[
        'menu.answerthequestionnaireretrieve.form.title',
        'menu.answerthequestionnaire.anserQuestion',
      ]"
    />
    <a-card>
      <!--让他居中  已经居中了，让题目变的宽一点-->
      <a-form
        :model="modelForm"
        :rule="rules"
        style="display: flex; align-items: center; justify-content: center"
        @submit="handleSubmit"
      >
        <!-- <vuedraggable v-model="modelForm.topic" item-key="index" class="wrapper" @end="end"> -->
        <a-form-item label="问卷名称" style="width: 50%">
          <a-input placeholder="请输入问卷名称" />
        </a-form-item>
        <a-form-item label="问卷描述" style="width: 50%">
          <a-textarea placeholder="请输入问卷描述" />
        </a-form-item>
        <div
          v-for="(item, index) in modelForm.topic"
          :key="index"
          style="width: 70%"
        >
          <a-collapse default-active-key="1">
            <a-collapse-item key="1" header="题目">
              <template #item="index">
                第{{ index + 1 }}题,题目:{{ item.questionName }}
              </template>
              <a-form-item
                :field="`topic.${index}.type`"
                :label="`问题${index + 1}类型`"
                :rules="{
                  required: true,
                  message: '请选择问题类型',
                  trigger: 'change',
                }"
              >
                <!--<a-radio-group v-model="item.type" >-->
                <!--  <a-radio :value="0" >单选</a-radio>-->
                <!--  <a-radio :value="1" >多选</a-radio>-->
                <!--  <a-radio :value="2" >填空</a-radio>-->
                <!--</a-radio-group>-->
                <a-tag v-if="item.type == 0">单选</a-tag>
                <a-tag v-if="item.type == 1">多选</a-tag>
                <a-tag v-if="item.type == 2">填空</a-tag>
              </a-form-item>
              <a-form-item
                :field="`topic.${index}.questionName`"
                :label="问题"
                :rules="{
                  required: true,
                  message: '请填写问题',
                  trigger: 'change',
                }"
              >
                <a-input
                  v-model.trim="item.questionName"
                  :style="{ width: '258px' }"
                  placeholder="请填写问题"
                  readonly
                />
              </a-form-item>
              <!-- 答案 -->

              <template v-if="item.type == 0">
                <a-table
                  v-model:selectedKeys="selectedKeys"
                  row-key="option"
                  :columns="columns"
                  :data="dataForTable"
                  :row-selection="danxuan"
                  :pagination="pagination"
                />
              </template>

              <template v-if="item.type == 1">
                <a-table
                  v-model:selectedKeys="selectedKeys"
                  row-key="option"
                  :columns="columns"
                  :data="dataForTable"
                  :row-selection="rowSelection"
                  :pagination="pagination"
                />
              </template>

              <template v-if="item.type == 2">
                <a-form-item
                  v-for="(opt, idx) in item.answers"
                  :key="idx"
                  :label="`作答区域：`"
                  :field="`topic.${index}.answers.${idx}.value`"
                  :rules="[
                    {
                      required: true,
                      message: '请输入答案',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <a-input
                    v-model.trim="opt.value"
                    :style="{ width: '258px' }"
                    placeholder="请输入答案"
                  />
                </a-form-item>
              </template>

              <a-form-item> </a-form-item>
            </a-collapse-item>
          </a-collapse>
        </div>
        <!-- </vuedraggable> -->
        <a-form-item>
          <a-button style="margin-left: 10px" @click="addSubmit()"
            >提交</a-button
          >
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import useLoading from '@/hooks/loading';
  import {
    submitChannelForm,
    BaseInfoModel,
    ChannelInfoModel,
    UnitChannelModel,
  } from '@/api/form';
  import vuedraggable from 'vuedraggable';
  import { ref, reactive, Ref } from 'vue';

  import { Survey, Question, previewsurvey, Choice } from '@/api/list';
  import loading from '@/hooks/loading';
  import { Breadcrumb } from '@arco-design/web-vue';
  import pagination from '@arco-design/web-vue/es/pagination';
  import { get } from 'http';
  import router from '@/router';
  import { useSurveyStore } from '@/store';
  import BaseInfo from './components/base-info.vue';
  import ChannelInfo from './components/channel-info.vue';
  import Success from './components/success.vue';
  import ChooseQuestionType from './components/choose-question-type.vue';
  import ChoiceQuestion from './components/choice-question.vue';
  // eslint-disable-next-line import/extensions
  import { getHash, getNextList } from './surveyUtils';

  const surveyStore = useSurveyStore();

  console.log('-----');
  console.log(useSurveyStore.$id);
  console.log('-----');

  const list: Ref<Question[]> = ref([]);

  // const survey: Survey = previewsurvey('1588914049915138049');
  const survey: Survey = previewsurvey(useSurveyStore);
  const map: Map<string, Question> = getHash(survey);

  console.log('-------');
  console.log(survey);
  console.log('-------');
  // console.log(map);

  // list.value.push(...getNextList(survey.questions[0], map));

  function clickChoice(choice: Choice) {
    if (choice.goTo != null) {
      list.value.push(...getNextList(map.get(choice.goTo), map));
    }
  }

  // components:{ vuedraggable }
  const rules = {};

  const danxuan = {
    type: 'radio',
  };

  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });

  const columns = [
    {
      title: '选项',
      dataIndex: 'option',
    },
  ];

  const dataForTable = reactive([
    {
      key: '1',
      option: 'A选项答案',
    },
    {
      key: '2',
      option: 'B选项答案',
    },
    {
      key: '3',
      option: 'C选项答案',
    },
    {
      key: '4',
      option: 'D选项答案',
    },
  ]);

  const modelForm = reactive({
    topic: [
      {
        type: 0,
        questionName: '第一题的题目',
        answers: [
          { value: 'A:本体选A' },
          { value: 'B:本体选B' },
          { value: 'C:本体选C' },
          { value: 'D:本体选D' },
        ],
      },
      {
        type: 1,
        questionName: '第二题的题目',
        answers: [
          { value: 'A:本体选A' },
          { value: 'B:本体选B' },
          { value: 'C:本体选C' },
          { value: 'D:本体选D' },
        ],
      },
      {
        type: 2,
        questionName: '第三题的题目',
        answers: [{ value: '填空题的答案' }],
      },
    ],
  });
  // const end(e) = {
  //   $refs.modelForm.clearValidate()
  // }
  const removeDomain = (index: number, idx: number) => {
    modelForm.topic[index].answers.splice(idx, 1);
  };
  const addDomain = (index: number) => {
    modelForm.topic[index].answers.push({ value: '' });
  };
  const addSubmit = () => {
    modelForm.validate((valid: number) => {
      if (valid) {
        console.log(modelForm.topic);
      }
    });
  };
  const removeQuestion = (index: number) => {
    modelForm.topic.splice(index, 1);
  };
  const addQuestion = () => {
    modelForm.topic.push({
      type: '',
      questionName: '',
      answers: [{ value: '' }],
    });
  };
</script>

<script lang="ts">
  export default {
    name: 'Step',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 0;
    background-color: var(--color-bg-2);

    :deep(.arco-form) {
      .arco-form-item {
        &:last-child {
          margin-top: 20px;
        }
      }
    }
  }

  .steps {
    margin-bottom: 76px;
  }
</style>
